<template>
<!--  {{tableText}}-->
  <div class="table-class-modify">
    <template v-for="text in tableText">
     <a-button :style="`background-color: ${text.color}`"   status="success" :autofocus="true" size="large" shape="round" type="primary" :long="false">
       <template #icon>
          <icon-font :type="text.icon" size="30"></icon-font>
       </template>
      <span @click="modifyBacColors(text.number)" >{{ text.text }}</span>
     </a-button>
      <div  class="ul-class-table-zeber"  style="position: relative;">
         <ul v-if="selectN===text.number&&text.number!==3"  class="back-ul-class" >
           <li v-if="text.number===4">
             <div :style="`background-color:white;width:${text.number!==4 ? '160px':'80px'};height:35px;text-align:center; line-height: 35px ;color:pink;`">奇数列</div>
           </li>
          <li v-for="c in 100">
            <div :ref="el => setElementRef(el, color+text.number+c+'+class')"   @click="modifyBacColorsTrue(`${color+text.number+c}+class`,text.number,null,'odd')" :style="`background-color:${getRandomHslColor()};width:${text.number!==4 ? '160px':'80px'};height:35px;`"></div>
          </li>
        </ul>

        <ul v-else-if="selectN===text.number&&text.number===3"  class="back-ul-class">
          <li  v-for="p in position">
            <icon-font :ref="el => setElementRef(el, 'font'+text.number+'+class')" @click="modifyBacColorsTrue(`font'+${text.number}+'+class`,text.number,p.text)" class="li-btn-table-class" :type="p.icon" size="40"></icon-font>
            <span class="span-table-class" > {{p.direction}}</span>
          </li>
        </ul>

        <ul style="float: right" v-if="selectN===text.number&&text.number===4"  class="back-ul-class cascader-slide-enter-class" >
          <li v-if="text.number===4">
            <div :style="`background-color:white;width:${text.number!==4 ? '160px':'80px'};height:35px;text-align:center; line-height: 35px ;color:pink;`">偶数列</div>
          </li>
          <li v-for="c in 100">
            <div :ref="el => setElementRef(el, color+text.number+c+'+class')"   @click="modifyBacColorsTrue(`${color+text.number+c}+class`,text.number,null,'even')" :style="`background-color:${getRandomHslColor()};width:${text.number!==4 ? '160px':'80px'};height:35px;`"></div>
          </li>
        </ul>

      </div>
     </template>
  </div>
  <div style="width: 100%;text-align: right;" >
    <a-button @click="closeBacColors"  shape="circle">
      <template #icon>
        <icon-close-circle-fill size="30" />
      </template>
    </a-button>
  </div>
   <table ref="tableRef" class="table-class-common" >
     <thead ref="theadRef" class="thead-class-common">
     <tr>
       <th v-for="n in columns"> {{n}}</th>
       <input v-if="showChecked" type="checkbox"  v-model="selectAll" @change="toggleAll" >
     </tr>
     </thead>
    <tbody  ref="tbodyRef" class="table-class-common">
    <tr v-for="m in rowData">
      <td v-for="n in m">{{n}}</td>
      <td v-for="op in operations">
        <a-button type="primary" disabled>{{op}}</a-button>
      </td>
      <td>
        <input v-if="showChecked" type="checkbox" v-model="selectedItems" :value="m.id" @change="updateSelectAll" >
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script setup>
import {getRandomHslColor} from "@/util/RandomColor.js";
import hooks from "@/hooks/index.js";
import {computed, onMounted, reactive, ref} from "vue";
import {IconFont} from "@/components/icon/index.js";
import {tableText, position, tableContent, operations,columnData} from "@/components/util/content.js";
import color from "@/components/util/color.ts";
const {modifyBacColor} = hooks();
const  tableRef = ref()
const  tbodyRef = ref()
const  theadRef = ref()
const selectN = ref(0)
const columns = ref(columnData)
const rowData= reactive(tableContent)
 const bacShow= ref(false)
const showChecked=ref(true)
const text = tableText[0].number
const elementRefs = ref({})
const evenColor = ref('#2c3e50')
const oddColor = ref('honeydew')
const selectedItems = ref([]);
const selectAll = ref(false);
const rowDataIds = ref([])
onMounted(() => {
  columns.value.push(...operations)
})
for (const item of tableContent) {
  rowDataIds.value.push(item.id);
}
function toggleAll() {
  selectedItems.value=rowDataIds.value.filter(item=>{
    if (!selectedItems.value.includes(item)) {
      return item;
    }else{
      return false;
    }
  })
}


const  modifyBacColors =(n)=>{
     selectN.value = n
}
const closeBacColors = (n)=>{
   selectN.value=0
}
const  modifyBacColorsTrue = (context,number,position='right',type)=>{


 const element = elementRefs.value[context]
  // 获取元素背景色，如果没有则使用默认红色
  let backgroundColor = element?.style?.backgroundColor || 'red';
   if(number===1){
     tableRef.value.style.color = element.style.backgroundColor;
   }else if(number===2){
     // const allCells = tableRef.value.querySelectorAll('th, td');
     const thCells = tableRef.value.querySelectorAll('th');
     const tdCells = tableRef.value.querySelectorAll('td');
     const mergedCells = [...thCells, ...tdCells]; // 合并成数组
     mergedCells.forEach(cell => {
       cell.style.cssText = `border-color:${element.style.backgroundColor};`
     })
   }else if(number===3){
     tableRef.value.style.cssText = `text-align:${position}`
   }else if(number === 4){
     const rows = tableRef.value.querySelectorAll('tbody tr');

     rows.forEach((row, index) => {
       if(type === 'odd') {
         // 奇数列：修改奇数行
         if(index % 2 === 0) {
           row.style.backgroundColor = backgroundColor;
         }
       } else {
         // 偶数列：修改偶数行
         if(index % 2 !== 0) {
           row.style.backgroundColor = backgroundColor;
         }
       }
     });

     // // 同时更新CSS变量保持一致性
     // if(type === 'odd') {
     //   oddColor.value = backgroundColor;
     // } else {
     //   evenColor.value = backgroundColor;
     // }
   }else if(number===5){

   }else if(number===6){

   }
   // 在这个地方添加一个回调这个函数就欧克
   selectN.value = 0
 }
const setElementRef = (el, key) => {
  if (el) {
    elementRefs.value[key] = el
  }
}
</script>
<style scoped>
.ul-class-table-zeber{

}
.table-class-common  th, td {
  border: 1px solid black;

}
.table-class-common {
border-collapse: collapse;
  margin: 0 auto;

 }
.table-class-common th, td {
  width: 120px ;
}
.table-class-common tr:nth-child(even) {
background-color: red;
}
.table-class-common tr:not(thead>tr):nth-child(odd) {
background-color: wheat;
}
.table-class-modify{
  display: flex;
  background: transparent ;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  position: relative;

}
.table-class-modify::before{
  content: "";
  display: block;
  height: 100%;
  width: 700px;
}
.table-class-modify>button{
  margin-left: 50px;
  position: relative;
  box-shadow: 26px 1px 57px -9px rgba(0, 0, 0, 0.3);
}
.back-ul-class {
  list-style: none;
   padding: 0;
  height: 188px;
  width: 160px;
  overflow: auto;
  position: absolute;

  top: 10px;
  left: -145px;
   /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.back-ul-class>li{
  text-align: center;
  line-height: 20px;
  position: relative;
}
/* Chrome/Safari */
.back-ul-class::-webkit-scrollbar {
  display: none;
}

.span-table-class{
  position: absolute;top: 0;left: 0;background-color: chartreuse;font-family: 'Agency FB',serif;
  display: none;
}
.li-btn-table-class:hover+.span-table-class{
  display: block;
}
.cascader-slide-enter-class{
  position: absolute;
  left: -66px;
}
.table-class-common>tr>td:nth-last-child(1){
  width: 30px;
}
</style>